<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:100px;width:200px;">
    <table cellpadding="0" cellspace="0" border="0">
        <tr>
            <td id="demo1">
                <table width="200" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>一</td>
                        <td>二</td>
                        <td>三</td>
                    </tr>
                </table>
            </td>
            <td id="demo2"></td>
        </tr>
    </table>
</div>
<script>
    var speed = 30;
    var MyMar = setInterval(scroll, speed), demo = document.getElementById('demo'), demo1 = document.getElementById('demo1'), demo2 = document.getElementById('demo2');
    demo2.innerHTML = demo1.innerHTML;
    demo.onmouseover = function () {
        clearInterval(MyMar);
    }
    demo.onmouseout = function () {
        MyMar = setInterval(scroll, speed);
    }
    function scroll() {
        if (demo2.offsetWidth - demo.scrollLeft <= 0)
            demo.scrollLeft -= demo1.offsetWidth;
        else {
            demo.scrollLeft++;
        }
    }
</script>
</body>
</html>